<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的信息',
  },
}
</route>
<template>
    <item width="180rpx" rightIcon="arrow-right" title="昵称" @click="inputUpdate('修改昵称', 'name', store.member.name)">
        <text> {{ store.member.name }}</text>
    </item>

    <item width="180rpx" title="头像">
        <upload v-model="store.member.avatar" @change="uploadUpdate('avatar')" />
    </item>

    <item width="180rpx" title="性别">
        <wd-radio-group v-model="store.member.gender" shape="dot" inline
            @change="valueUpdate('修改性别', 'gender', store.member.gender)">
            <wd-radio value="保密">保密</wd-radio>
            <wd-radio value="男">男</wd-radio>
            <wd-radio value="女">女</wd-radio>
        </wd-radio-group>
    </item>

    <item width="180rpx" title="手机号" @click="mobileUpdate()">
        <text> {{ store.member.mobile }}</text>
    </item>

    <wd-message-box selector="code">
        <item width="110rpx" title="手机号" padding="30rpx 0 0">
            <wd-input v-model="store.member.mobile" placeholder="请输入手机号" clearable />
        </item>
        <item width="110rpx" title="验证码" padding="30rpx 0 0">
            <view class="code_box">
                <wd-input v-model="code.value" clearable style="width:calc(100% - 220rpx);" />
                <view class="code" @click="send()">{{ timer }}</view>
            </view>
        </item>
    </wd-message-box>

    <item width="180rpx" title="生日">
        <wd-datetime-picker v-model="store.member.birthday" type="date" @confirm="birthdayConfirm" :minDate="0" />
    </item>
</template>

<script lang="ts" setup>
import { SmsCode } from '@/utils'
import { useMessage } from 'wot-design-uni';
import { useStore } from '@/utils/store';
import { http } from '@/utils/http';
import dayjs from 'dayjs';
const store = useStore()
if (store.member.birthday == null) store.member.birthday = ''
else if (store.member.birthday) store.member.birthday = dayjs(store.member.birthday).valueOf()
const message = useMessage()
const code_message = useMessage('code')
function inputUpdate(title: string, field: string, value: any, type: any = 'text') {
    message.prompt({ title: title, inputValue: value, inputType: type }).then((resp) => {
        http.put('/member/user/me', { field: field, value: resp.value }).then((res: any) => {
            uni.showToast({ title: res.message, icon: "none" })
            if (res.code === 200) {
                store.setMemberData()
            }
        })
    }).catch(() => { })
}

function mobileUpdate() {
    code_message.confirm({
        title: "请输入手机号",
        beforeConfirm({ resolve }) {
            http.put('/member/user/me', { field: 'mobile', value: store.member.mobile, code: parseInt(code.value.value), uuid: code.value.uuid }).then((res: any) => {
                uni.showToast({ title: res.message, icon: "none" })
                if (res.code === 200) {
                    store.setMemberData()
                    resolve(true)
                } else {
                    resolve(false)
                }
            })
        }
    }).then(() => { }).catch(() => { })
}

function valueUpdate(title: string, field: string, value: any) {
    message.confirm({ title: '确定' + title + '吗' }).then(() => {
        http.put('/member/user/me', { field: field, value: value }).then((res: any) => {
            uni.showToast({ title: res.message, icon: "none" })
            if (res.code === 200) {
                store.setMemberData()
            }
        })
    }).catch(() => { store.setMemberData() })
}

function uploadUpdate(field: string) {
    http.put('/member/user/me', { field: field, value: store.member[field] ? JSON.stringify(store.member[field]) : null }).then((res: any) => {
        uni.showToast({ title: res.message, icon: "none" })
        if (res.code === 200) {
            store.setMemberData()
        }
    })
}

const code = ref({
    value: '',
    uuid: '',
})
const timer = ref('发送验证码')
function send() {
    SmsCode(store.member.mobile, timer).then(res => {
        if (res.code == 200) code.value.uuid = res.data.uuid
    })
}

function birthdayConfirm({ value }) {
    http.put('/member/user/me', { field: 'birthday', value: dayjs(value).format('YYYY-MM-DD') }).then((res: any) => {
        uni.showToast({ title: res.message, icon: "none" })
    });
}
</script>

<style scoped>
.code_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.code {
    width: 220rpx;
    margin-left: 20rpx;
    font-size: 28rpx;
    line-height: 35px;
    text-align: center;
    border: solid 1px #e5e5e5;
    border-radius: 10rpx;
}

:deep(.wd-picker__cell) {
    padding: 0;
}

text {
    font-size: 28rpx;
}
</style>